<script>
  document.addEventListener('DOMContentLoaded', function () {
    const data = '{{posts}}';//字符串
    const posts = JSON.parse(data);//转对象
    console.log(posts);
  });
</script>
<main class="style-container content-container rounded-xl style-article-bg flex-1">
  <div id="article" class="flex flex-wrap style-space-max sm:mt-12">
    <h1 class="style-title size-title-max w-full">归档页：</h1>
    <ol
      class="relative space-y-8 before:absolute before:-ml-px before:h-full before:w-0.5 before:rounded-full before:bg-gray-300">
      {% for p in posts %}
      {% if p.year.length %}
      <h2 class="style-des size-title">{{ p.year }}</h2>
      {% /if %}
      <li class="relative -ms-1.5 flex items-start gap-4">
        <span class="size-3 shrink-0 rounded-full bg-blue-500"></span>
        <div class="-mt-2">
          <time class="font-medium style-des size-des">{{p.date}}</time>
          <a href="{{ p.url }}">
            <h4 class="style-title size-title line-clamp-1 my-2">{{ p.title }}</h4>
          </a>
          <!--<p class="line-clamp-2 style-des size-des">描述</p> -->
          {% if p.cats.@count %}
          分类：
          {% /if %}

          {% for cat in p.cats %}
          <span class="posted-in"><a href='{{ cat.url }}'>{{ cat.name }}</a></span>
          {% /for %}

          {% if p.tags.@count %}
          <span class="tran-tags">标签:</span>&nbsp;
          {% /if %}

          {% for tag in p.tags %}
          <a href='{{ tag.url }}'>#{{ tag.name }}</a>
          {% /for %}

        </div>
      </li>
      {% /for %}
    </ol>

    <!--填充布局用-->
    <div class="w-full"></div>
  </div>
</main>